<template>
  <div class="insurance-detail">
    <!-- 头部返回与标题 -->
    <van-nav-bar
      title="投保详情"
      left-text="返回"
      left-arrow
      @click-left="handleGoBack"
    />

    <!-- 投保单基本信息 -->
    <div class="policy-header">
      <h2>投保单 #10001</h2>
      <p>提交时间: 2023-06-10 09:23:45</p>
      <van-tag type="success">承保成功</van-tag>
    </div>

    <!-- 投保人信息 -->
    <div class="info-section">
      <h3><van-icon name="user" /> 投保人信息 </h3>
      <ul class="info-list">
        <li><span>姓名：</span>张三</li>
        <li><span>身份证号：</span>130XXXXXXXXXXXX1234</li>
        <li><span>签发机关</span>130XXXXXXXXXXXX1234</li>
        <li><span>有效期限</span>130XXXXXXXXXXXX1234</li>
        <li><span>统一社会信用代码证</span>130XXXXXXXXXXXX1234</li>
        <li><span>联系电话：</span>138XXXX5678</li>
        <li><span>是否河北省：</span>是</li>
      </ul>
    </div>
    <!-- 上年保单信息 -->
    <div class="info-section">
      <h3><van-icon name="user" /> 上年商业险信息 </h3>
      <ul class="info-list">
        <li><span>商业险承保地区：</span>货车（油车）</li>
        <li><span>商业险承保公司：</span>冀A12345</li>
        <li><span>商业险保单号：</span>LXXXXXXXXXXXXXX1</li>
        <li><span>商业险保单照片：</span>2020-05-18</li>
      </ul>
      <h3><van-icon name="user" /> 上年交强险信息 </h3>
      <ul class="info-list">
        <li><span>交强险承保地区：</span>货车（油车）</li>
        <li><span>交强险承保公司：</span>冀A12345</li>
        <li><span>交强险保单号：</span>LXXXXXXXXXXXXXX1</li>
        <li><span>交强险保单照片：</span>2020-05-18</li>
      </ul>
    </div>
    <!-- 车辆信息 -->
    <div class="info-section">
      <h3><van-icon name="user" /> 车辆信息 </h3>
      <ul class="info-list">
        <li><span>车牌号：</span>货车（油车）</li>
        <li><span>车辆类型：</span>冀A12345</li>
        <li><span>所有人：</span>LXXXXXXXXXXXXXX1</li>
        <li><span>住址：</span>2020-05-18</li>
        <li><span>使用性质：</span>2020-05-18</li>
        <li><span>品牌型号：</span>2020-05-18</li>
        <li><span>车辆识别代号：</span>2020-05-18</li>
        <li><span>发动机号码：</span>2020-05-18</li>
        <li><span>注册日期：</span>2020-05-18</li>
        <li><span>发证日期：</span>2020-05-18</li>
        <li><span>核定载人数：</span>2020-05-18</li>
        <li><span>货车核定载质量：</span>2020-05-18</li>
        <li><span>整备质量：</span>货车（油车）</li>
        <li><span>车辆类型：</span>货车（油车）</li>
        <li><span>采集购车发票照片：</span>货车（油车）</li>
      </ul>
    </div>
    <!-- 投保信息 -->
    <div class="info-section">
      <h3><van-icon name="user" /> 投保信息 </h3>
      <ul class="info-list">
        <li><span>投保类型：</span>交强险+商业险</li>
        <li><span>承保公司：</span>中国人民保险</li>
        <li><span>联系电话：</span>400-1234-1234</li>
        <li><span>意向投保地市：</span>石家庄市</li>
        <li><span>完成日期：</span>2023-06-15</li>
        <li><span>行业监督电话：</span>0311-87012378</li>
      </ul>
    </div>
    <!-- 派单信息 -->
    <div class="info-section">
      <div class="pActive" v-for="(v,i) in pActiveList" :key="i">
        <h3 class='z'>
          <div>
            <van-icon name="user" />  派单编号 <span style="margin-left: 10px; color:red;">00{{i+1}}</span>
          </div>
          <div v-if="v.isShow" @click="v.isShow = !v.isShow">收缩</div>
          <div v-else @click="v.isShow = !v.isShow">展开</div>
        </h3>
        <div v-if="v.isShow">
          <ul class="info-list">
            <li><span>派单编号：</span>中国人民保险</li>
            <li><span>派单公司：</span>400-1234-1234</li>
            <li><span>联系电话：</span>石家庄市</li>
            <li><span>行业监督电话：</span>石家庄市</li>
          </ul>
          <h3><van-icon name="user" /> 接单信息 </h3>
            <ul class="info-list">
              <li><span>接单时间：</span></li>
              <li><span>接单用户：</span>中国人民保险</li>
              <li><span>接单机构：</span>400-1234-1234</li>
              <li><span>反馈信息：</span>400-1234-1234</li>
              <li><span>反馈时间：</span>400-1234-1234</li>
            </ul>
            <h3><van-icon name="user" /> 处理结果 </h3>
            <ul class="info-list">
              <li><span>承保结果：</span>正常承保/不予承保/退回投保/放弃投保</li>
              <li><span>处理日期：</span>中国人民保险</li>
              <li><span>处理机构：</span>400-1234-1234</li>
            </ul>
            <ul class="info-list" v-if="cbjg == 0">
              <li><span>拒保原因：</span>400-1234-1234</li>
              <li><span>拒保描述：</span>400-1234-1234</li>
              <li><span>拒保材料下载：</span>下载名称</li>
              <li><span>拒保日期：</span>400-1234-1234</li>
            </ul>
            <ul class="info-list" v-if="cbjg == 1">
              <li><span>退回类型：</span>400-1234-1234</li>
              <li><span>退回描述：</span>400-1234-1234</li>
              <li><span>退回日期：</span>400-1234-1234</li>
            </ul>
            <ul class="info-list" v-if="cbjg == 2">
              <li><span>放弃原因：</span>400-1234-1234</li>
              <li><span>放弃描述：</span>400-1234-1234</li>
              <li><span>放弃日期：</span>400-1234-1234</li>
            </ul>
            <h3><van-icon name="user" /> 交强险回填信息 </h3>
            <ul class="info-list">
              <li><span>是否承保：</span>交强险+商业险</li>
              <li><span>签单日期：</span>中国人民保险</li>
              <li><span>自主定价系数：</span>400-1234-1234</li>
              <li><span>签单保费（元）：</span>石家庄市</li>
            </ul>
            <h3><van-icon name="user" /> 商业险回填信息 </h3>
            <ul class="info-list">
              <li><span>是否承保：</span>交强险+商业险</li>
              <li><span>签单日期：</span>中国人民保险</li>
              <li><span>自主定价系数：</span>400-1234-1234</li>
              <li><span>签单保费（元）：</span>石家庄市</li>
            </ul>

        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { showToast } from 'vant';
import { ref, computed } from 'vue';

const cbjg = ref(0);
const pActiveList = ref([
  { isShow: false },
  { isShow: false },
  { isShow: false },
]);
// 返回上一页方法
const handleGoBack = () => {
  // 实际项目中可使用路由跳转返回，如：
  // router.back();
  console.log('返回上一页');
};

</script>

<style lang="less" scoped>

.insurance-detail {
  font-size: 14px;
  min-height: 100vh;
  background-color: #fff;
}

.policy-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.policy-header h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.policy-header p {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.info-section {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.info-section h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.info-section h3 .van-icon {
  margin-right: 8px;
}

.pActive {
  margin-top: 7px;
  border-bottom: 1px dashed #666;
  .z {
    display: flex;
    justify-content: space-between;
  }
}
.info-list {
  list-style: none;
  padding: 0;
  li {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    span:first-child {
      color: #666;
    }
  }
}

</style>